<!--
 * @Autor: 黄旗
 * @Date: 2020-06-02 17:47:27
-->
<template>
    <div>
        <Timeline v-if="data.length > 0" class="ivu-pt-16 main-height">
            <TimelineItem v-for="(items, index) in data" :key="'journal-'+index">
                <p class="time">{{items.created_at_str}}</p>
                <p class="content">{{items.action_content}}</p>
                <p class="consultant">
                    <span class="c-inr-right" v-if="items.profession_name">{{items.profession_name}}</span>
                    <span class="c-inr-right" v-if="items.operate_name">{{items.operate_name}}</span>
                    <Badge status="processing" :text="items.action_type_str" />
                </p>
            </TimelineItem>
            <div class="ivu-pt-16" style="text-align: center">
                <a href="javaScript:;" v-if="this.page.total>data.length" @click="load">点击加载更多</a>
                <span v-else>没有更多了</span>
            </div>
        </Timeline>
        <div v-else class="ivu-pt-16" style="min-height: 200px;text-align: center">暂无操作日志</div>
    </div>
</template>
<script>
    import { LogList } from '@api/patient'

    export default {
        name: 'Journal',
        data () {
            return {
                page: {
                    page: 1,
                    pageSize: 10,
                    total: 0
                },
                data: [],
                id: ''
            }
        },
        methods: {
            getData (id) {
                this.page.page = 1
                this.id = id
                const params = {
                    patient_user_id: id,
                    page: this.page.page,
                    pageSize: this.page.pageSize
                }
                LogList(params).then((res) => {
                    this.page.total = res.total
                    this.data = res.list
                }).catch(() => { })
            },
            load () {
                this.page.page = this.page.page + 1
                LogList({
                    patient_user_id: this.id,
                    page: this.page.page,
                    pageSize: this.page.pageSize
                }).then(res => {
                    this.page.total = res.total
                    this.data.push(...res.list)
                })
            }
        }
    }
</script>
<style scoped>
    .time {
        font-size: 14px;
        font-weight: bold;
    }

    .content {
        padding: 10px 0;
    }

    .consultant {
        color: #9ea7b4;
    }

    .c-inr-right {
        margin-right: 10px;
    }

    .main-height {
        height: 630px;
        max-height: 630px;
        overflow-y: auto;
    }

    *::-webkit-scrollbar {
        width: 10px;
        /*对垂直流动条有效*/
        height: 10px;
        /*对水平流动条有效*/
    }

    /*定义滚动条的轨道颜色、内阴影及圆角*/
    *::-webkit-scrollbar-track {
        background-color: #fff;
        border-radius: 3px;
    }

    /*定义滑块颜色、内阴影及圆角*/
    *::-webkit-scrollbar-thumb {
        border-radius: 7px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
        background-color: #eee;
    }

    /*定义右下角汇合处的样式*/
    *::-webkit-scrollbar-corner {
        background: khaki;
    }
</style>
